<!DOCTYPE html>
<head xmlns:v-bind="http://www.w3.org/1999/xhtml" >
    <meta charset="UTF-8">
    <title>demo16-vue过渡、动画</title>
  <script src="./js/vue.min.js"></script>
  <script src="./js/vue-router.js"></script>
  <style>
    .fade-enter-active, .fade-leave-active{
      transition: opacity 2s;
    }
    .fade-enter, .fade-leave-to {
      opacity: 0;
    }

  </style>
</head>

<body>

   <div id="app">
     <button v-on:click="show = !show">点我</button>
     <transition name="fade">
       <p v-show="show" v-bind:style="styleObj">动画实例</p>
     </transition>
   </div>

</body>

<script type="application/javascript">
 const vm = new Vue({
   el: "#app",
   data:{
     show: true,
     styleObj: {
       fontSize: '30px',
       color: 'red'
     }
   }
 })

</script>
</html>
